<template>
  <el-aside width="300px" v-loading="loading">
    <el-container>
      <el-header>
        <el-input placeholder="输入关键字进行过滤" v-model="searchValue" clearable
                  style="margin-right: 10px;"></el-input>
        <el-button type="primary" plain icon="el-icon-refresh" @click="getList"></el-button>
      </el-header>
      <el-main class="no-padding">
        <el-tree ref="treeRef" class="menu" node-key="id" :data="dataList" :props="categoryProps"
                 :highlight-current="true" :expand-on-click-node="false" :filter-node-method="handleFilterNodeMethod"
                 @node-click="handleNodeClick">
          <template #default="{ node, data }">
							<span class="custom-tree-node">
                <el-tag :type="data.enabled ? 'success' : 'danger'"><span class="label">{{ node.label }}</span></el-tag>
								<span class="code">{{ data.code }}</span>
								<span class="do">
									<el-button-group>
										<el-button icon="el-icon-edit" size="small" @click.stop="handleEditClick(data)"
                               v-powers="['system:category:info']"></el-button>
										<el-button icon="el-icon-delete" size="small" @click.stop="handleDeleteClick(data)"
                               v-power="'system:category:del'"></el-button>
									</el-button-group>
								</span>
							</span>
          </template>
        </el-tree>
      </el-main>
      <el-footer style="padding: 0 20px; line-height: 49px;">
        <el-button type="primary" size="small" icon="el-icon-plus" style="width: 100%" @click="handleAddClick">
          模板分类
        </el-button>
      </el-footer>
    </el-container>
  </el-aside>

  <el-dialog destroy-on-close append-to-body :close-on-click-modal="false" width="1080px" :title="title"
             v-model="open" @closed="handleCancel">
    <category-form ref="categoryFormRef" :form="form"></category-form>
    <template #footer>
      <el-button plain :type="form.id ? 'warning' : 'primary'" :loading="saving" @click="handleSubmitForm"
                 v-power="form.id ? 'system:category:edit' : 'system:category:add'">{{ form.id ? '修 改' : '保 存' }}
      </el-button>
      <el-button plain type="info" @click="handleCancel">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import categoryForm from "./category.vue";
import categoryApi from "@/api/generator/category";
import modal from "@/utils/modal";

const emit = defineEmits(['nodeClick']);

const treeRef = ref(null);
const loading = ref(false);
const searchValue = ref("");
const dataList = ref([]);
const categoryProps = {
  label: "name",
};
const categoryFormRef = ref(null);
const open = ref(false);
const title = ref("新增模板分类");
const saving = ref(false);
const form = ref({
  id: null,
  code: null,
  name: null,
  sort: null,
  remark: null,
  enabled: null
});

const handleFilterNodeMethod = (value, data) => {
  if (!value) return true;
  const targetText = data.name + data.code;
  return targetText.indexOf(value) !== -1;
}

const handleNodeClick = (data) => {
  emit('nodeClick', data);
}

const handleAddClick = () => {
  title.value = '新增模板分类';
  open.value = true;
}

const handleDeleteClick = (data) => {
  const idList = [data.id];
  modal.confirm(`确定删除选中的 ${idList.length} 项吗？`).then(() => {
    categoryApi.del.delete(idList).then(response => {
      if (response.status) {
        modal.successMessage(response.message);
        getList();
      } else {
        modal.errorMessage(response.message);
      }
    });
  }).catch(() => {
    modal.infoMessage("用户取消操作");
  })
}

const handleEditClick = (data) => {
  categoryApi.info.get(data.id).then(response => {
    form.value = response.data;
    title.value = '编辑模板分类';
    open.value = true;
  });
}

const getList = () => {
  loading.value = true;
  categoryApi.lists.get().then(response => {
    dataList.value = response.data.list;
    loading.value = false;
  })
}

const handleCancel = () => {
  resetForm(categoryFormRef.value.getFormRef());
  open.value = false;
}

const resetForm = (formEl) => {
  form.value = {
    id: null,
    code: null,
    name: null,
    sort: null,
    remark: null,
    enabled: null
  };
  if (!formEl) return;
  formEl.resetFields();
}

const handleSubmitForm = () => {
  saving.value = true;
  const formRef = categoryFormRef.value.getFormRef();
  formRef.validate(valid => {
    if (valid) {
      if (form.value.id) {
        // 修改
        categoryApi.edit.put(form.value).then(response => {
          modal.message(response.message, {type: response.status ? 'success' : 'error'})
          saving.value = false;
          if (response.status) {
            handleCancel();
            getList();
          }
        })
      } else {
        // 新增
        categoryApi.add.post(form.value).then(response => {
          modal.message(response.message, {type: response.status ? 'success' : 'error'})
          saving.value = false;
          if (response.status) {
            handleCancel();
            getList();
          }
        })
      }
    } else {
      saving.value = false;
      modal.warningMessage("表单校验不通过");
    }
  });
}

onMounted(() => {
  getList();
});

watch(() => searchValue.value, (value) => {
  treeRef.value.filter(value);
});
</script>

<style scoped>
.menu:deep(.el-tree-node__label) {
  display: flex;
  flex: 1;
  height: 100%;
}

.custom-tree-node {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 24px;
  height: 100%;
}

.custom-tree-node .code {
  font-size: 12px;
  color: #999;
}

.custom-tree-node .do {
  display: none;
}

.custom-tree-node:hover .code {
  display: none;
}

.custom-tree-node:hover .do {
  display: inline-block;
}
</style>
